<template>
  <div style="height: 100%">
    <el-row style="height: calc(100% - var(--el-component-size))" class="tableContainer">
      <base-table :data="tableData"></base-table>
    </el-row>
    <el-pagination layout="prev, pager, next" @current-change="getTableData" :total="totalRecords"
      v-model:page-size="pageSize" v-model:current-page="currentPage" />
  </div>
</template>
<script lang="ts" setup>
import { ElPagination, ElRow, ElPopover, ElSwitch, ElTableColumn, ElButton, ElInput, ElFormItem, ElForm } from "element-plus"
import BaseTable from "./BaseTable.vue";
</script>
<script lang="ts">
import { jsonRequest } from "@/requests";
import { defineComponent, ref } from "vue";
import { TableData, DatabaseBasicRequest, DatabaseQueryRequest } from "./models";

const currentPage = ref(1)
const pageSize = ref(20)

export const getTableNames = async (): Promise<string[]> => {
  const resp = await jsonRequest.get("/api/db_browser/table_names", {});
  return resp;
};

export const query = async (tableName: string, page: number, pageSize: number): Promise<TableData> => {
  const resp = await jsonRequest.get("/api/db_browser/query", { params: { tableName, page, pageSize } });
  return resp as TableData;
};


export default defineComponent({
  props: {
    sqlitePath: String,
  },
  data() {
    return {
      tableData: {} as TableData,
      tableNames: [] as string[],
    };
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const data: TableData = await query(
        "aaaaaa",
        currentPage.value,
        pageSize.value
      );
      this.tableData = data;
      this.getAllTableNames();
    },
    async getAllTableNames() {
      const tableNames = await getTableNames();
      this.tableNames = tableNames;
    },
  },
  computed: {
    totalRecords() {
      if ((this.tableData != null) && (this.tableData.totalRecords != null)) {
        return this.tableData.totalRecords
      } else {
        return 0
      }
    }
  }
});
</script>

<style>
.tableContainer .el-table td {
  padding: 0 0;
}

.tablenames {
  max-height: 30vh;
  overflow-y: auto;
}

.table-name-item {
  margin-top: 6px;
}

.table-name-item:hover {
  color: #409eff;
  cursor: default;
}
</style>
